import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<"form">) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button className="cursor-pointer" size="sm">
          Sign in
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[400px]">
        <form className={cn("flex flex-col gap-6", className)} {...props}>
          <div className="flex flex-col items-center gap-2 text-center">
            <h1 className="font-bold text-2xl">Welcome back</h1>
            <p className="text-balance text-muted-foreground text-sm">
              Sign in to your account to continue
            </p>
          </div>
          <div className="grid gap-3">
            <Button variant="outline" className="w-full" size={"lg"}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <title>github</title>
                <path
                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                  fill="currentColor"
                />
              </svg>
              Continue with Github
            </Button>
            <Button variant="outline" className="w-full" size={"lg"}>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <title>dingtalk</title>
                <path
                  d="M512 0C229.257143 0 0 229.257143 0 512s229.257143 512 512 512 512-229.257143 512-512S794.742857 0 512 0z m259.428571 440.342857c-1.142857 4.8-4 11.885714-8 20.342857h0.114286l-0.457143 0.8c-23.2 49.257143-83.542857 145.942857-83.542857 145.942857s-0.114286-0.228571-0.342857-0.571428l-17.714286 30.628571h85.142857L584.114286 852.571429l36.914285-146.285715h-66.971428l23.314286-96.8c-18.857143 4.457143-41.028571 10.742857-67.428572 19.2 0 0-35.657143 20.8-102.742857-40 0 0-45.257143-39.657143-18.971429-49.6 11.2-4.228571 54.171429-9.6 88-14.057143 45.714286-6.171429 73.828571-9.371429 73.828572-9.371428S409.142857 517.714286 375.657143 512.571429c-33.485714-5.257143-75.885714-60.685714-84.914286-109.485715 0 0-13.942857-26.742857 30.057143-14.057143 44 12.685714 226.171429 49.371429 226.171429 49.371429s-237.028571-72.342857-252.8-89.942857c-15.771429-17.6-46.4-96.228571-42.4-144.571429 0 0 1.714286-12 14.171428-8.8 0 0 175.2 79.657143 294.971429 123.314286 119.771429 43.314286 223.885714 65.485714 210.514285 121.942857z"
                  fill="currentColor"
                />
              </svg>
              Continue with Dingtalk
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}
